<!--下拉树组件，可搜索筛选-->
<template >
  <a-row style="height:100%;width:100%;">
    <a-col style="height:100%;">
      <a-card :bordered="false" style="height:100%;width:100%;border: 1px solid #e8e8e8;border-radius: 4px;" >
        <c-content-layout>
          <template slot="bottom" slot-scope="slotProps">
            <a-input-search style="width:100%;" placeholder="搜索" @change="onChange" />
            <a-tree
              :style="'height:'+(slotProps.height-20)+'px;width:100%;overflow : auto;'"
              @select="onselect"
              :checkedKeys="checkedKeys"
              :treeData="funcTreeData"
              @expand="onExpand"
              :auto-expand-parent="autoExpandParent"
              :checkStrictly="false"
              :expandedKeys="expandedKeys"
              :disabled="disabled"
            >
              <template slot="title" slot-scope="{ title }">
                <span v-if="title.indexOf(searchValue) > -1">
                  {{ title.substr(0, title.indexOf(searchValue)) }}
                  <span style="color: #f50">{{ searchValue }}</span>
                  {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                </span>
                <span v-else>{{ title }}</span>
              </template>
              <span slot="isButton" slot-scope="{slotTitle,menuType}">
                {{ slotTitle }}
                <a-icon v-if="menuType==2" type="save" ></a-icon>
              </span>
            </a-tree>
          </template>
        </c-content-layout>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}
//构建树数据
const generateList = data => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i]
    const key = node.key
    const title = node.title
    dataList.push({ key, title: title })
    if (node.children) {
      generateList(node.children)
    }
  }
}
const dataList = []
export default {
  name: 'AntTreeSelect',
  components: {
  },
  props: {
    /**
     * 数据源，接口url或数组，注意数据的子项必须是 children
     */
    treeData: {
      type: [Array, String],
      default: () => []
    },
  },
  data () {
    return {
      submitLoading: false,
      //搜索值
      searchValue: '',
      //源节点数据
      funcTreeData: [],
      checkedKeys: [],
      //展开的节点
      expandedKeys: [],
      //选中的节点
      selectedKeys: [],
      //是否自动展开父项
      autoExpandParent: true,
      //是否禁用树
      disabled: false
    }
  },
  created () {
  },
  mounted() {
    this.loadTreeData(this.treeData)
  },
  watch: {
    treeData(val) {
      this.loadTreeData(val)
    }
  },
  methods: {
    /**
     * 加载数据
     * @param val
     */
    loadTreeData (val) {
      if (val instanceof Array) {
        this.funcTreeData = this.dealData(val)
        generateList(this.funcTreeData)
      } else {
        this.$getAction(val, {}).then(res => {
          this.funcTreeData = this.dealData(res.data)
          generateList(this.funcTreeData)
        })
      }
    },
    /**
     * 禁用非叶子结点
     * @param param
     * @returns {*}
     */
    dealData (param) {
      return param.map(item => ({
        ...item,
        selectable: !item.children,
        children: item.children ? this.dealData(item.children) : []
      }))
    },
    /**
     * 选择数据
     * @param selectedKeys
     * @param info
     */
    onselect(selectedKeys, info){
      const { node } = info;
      // 检查是否为叶子节点
      if(node.$children.length==0 && selectedKeys.length>0){
      this.$emit('treeSelect', selectedKeys,info);
      }
    },
    /**
     * 展开树
     * @param expandedKeys
     */
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    /**
     * 搜索节点
     * @param e
     */
    onChange(e) {
      const value = e.target.value
      const expandedKeys = dataList
        .map(item => {
          if (item.title.indexOf(value) > -1) {
            return item.key
          }
          return null
        })
        .filter((item, i, self) => item && self.indexOf(item) === i)
      this.expandedKeys = expandedKeys
      this.searchValue = value
      this.autoExpandParent = true
    }
  }
}
</script>
<style lang="less" scoped>

</style>
